import React from 'react';
import CodeConverter from '@/components/CodeConverter';
import { ArrowLeft, Code } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Link } from 'react-router-dom';

const CodeConverterPage = () => {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 p-4 md:p-8">
      <div className="max-w-6xl mx-auto">
        <div className="mb-6">
          <Button asChild variant="ghost">
            <Link to="/" className="flex items-center gap-2">
              <ArrowLeft size={16} />
              返回首页
            </Link>
          </Button>
        </div>
        
        <div className="flex items-center gap-3 mb-6">
          <Code className="text-orange-500" size={32} />
          <h1 className="text-2xl md:text-3xl font-bold text-gray-800">代码转换器</h1>
        </div>
        
        <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
          <CodeConverter />
        </div>
        
        <div className="mt-8 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
          <h2 className="text-lg font-semibold mb-3">使用说明</h2>
          <ul className="list-disc pl-5 space-y-2 text-gray-700">
            <li>在左侧选择源语言并输入代码</li>
            <li>在右侧选择目标语言</li>
            <li>点击"转换代码"按钮进行转换</li>
            <li>支持复制转换后的代码到剪贴板</li>
            <li>支持 Java, Python, JavaScript, C++, C#, Go 等多种语言</li>
            <li>转换结果仅供参考，请仔细检查后再使用</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default CodeConverterPage;
